<template>
<div v-loading="loading">
    <div>加班申请单管理</div>
    <form>
        <div style="margin-top:20px;">
                <div style="float:left;">
                    <span>人员姓名:</span>
                    <el-input
                        placeholder="请输入人员姓名"
                        style="margin: 0px;padding: 0px;width:290px"
                        size="mini"
                        v-model="user_name">
                    </el-input>
                </div>
                <div style="float:left;margin-left:12.5px">
                    <span>部门名称:</span>
                    <el-select v-model="department_id" clearable placeholder="请选择" size="mini" style="width:290px" filterable>
                        <el-option
                        v-for="item in departmentList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div style="float:left;margin-left:12.5px">
                    <span>项目名称:</span>
                    <el-select v-model="project_id" clearable placeholder="请选择" size="mini" style="width:290px" filterable>
                        <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>         
        </div>   
        <div style="padding-top:45px">
            <div style="float:left;">
                    <span>加班地点:</span>
                    <el-input
                        placeholder="请输入加班地点"
                        style="margin: 0px;padding: 0px;width:290px"
                        size="mini"
                        v-model="application_place">
                    </el-input>
                </div>  
            <div style="float:left;margin-left:12.5px">
                <span class="demonstration">加班时间:</span>
                <el-date-picker
                    size="mini"
                    v-model="overtime_all_time"
                    type="daterange"
                    style="width:290px"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
            <!-- <div style="float:left;margin-left:5px;">
                <span>审核级别:</span>
                <el-select v-model="audit_level_id" clearable placeholder="请选择" size="mini" style="width:300px"> 
                    <el-option
                        v-for="item in audit_level"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                </el-select>
            </div> -->
            <div style="float:left;margin-left:12.5px">
                <span>审核状态:</span>
                <el-select v-model="application_status" clearable placeholder="请选择" size="mini" style="width:290px"> 
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>
    </form>
    <div style="margin-top:45px">
            <el-button size="mini" @click="prepareQuery" type="primary">查询</el-button>
            <el-button size="mini" @click="openInsert" icon="el-icon-plus" type="primary">新增</el-button>
            <el-button size="mini" @click="fnReset" type="primary">重置</el-button>
    </div>
    <div>
        <div id="show-list" style="margin-top: 10px">
            <el-dialog :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
                
                @close="closeDialog">
                <el-form label-width="80px" :rules="editFormRules" :model="editForm" ref="editForm" v-loading="formLoading" >
                    <el-input size="mini" style="width: 300px" v-model="application_id_form" placeholder="请输入主键" v-if="show"></el-input>
                    <div class="div1">
                        <span style="color:red">*</span><span>部门名称:</span>
                        <el-select v-model="department_id_form" clearable style="width: 300px" placeholder="请选择部门" size="mini" @change="loadUser" filterable @focus="departmentFocus" :disabled="disable_sign">
                            <el-option
                                v-for="item in departmentList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <span v-if="isShowMsg1" class="showmsg">{{msg1}}</span>
                    </div>
                    <div class="div1">
                        <span style="color:red">*</span><span>项目名称:</span>
                        <el-select v-model="project_id_form" placeholder="请选择" clearable size="mini" style="width:300px;" filterable @focus="projectFocus" :disabled="disable_sign">
                            <el-option
                                v-for="item in projectList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <span v-if="isShowMsg2" class="showmsg">{{msg2}}</span>
                    </div>
                    
                    <div class="div1">
                        <span style="color:red">*</span><span>用户姓名:</span>
                        <el-select v-model="user_id_form" @change="fnSelect" clearable placeholder="请选择" size="mini" style="width:300px" @focus="userFocus" :disabled="disable_sign">
                            <el-option
                                v-for="item in userList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                            </el-option>
                        </el-select>
                        <span v-if="isShowMsg3" class="showmsg">{{msg3}}</span>
                    </div>
                    
                    <!-- <div class="div1">
                        <span style="color:red">*</span><span>审核级别:</span>
                        <el-select v-model="audit_level_id_form" clearable placeholder="请选择" size="mini" style="width:300px">
                            <el-option
                                v-for="item in audit_level"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                            </el-option>
                        </el-select>
                        <span v-if="isShowMsg4" class="showmsg">{{msg4}}</span>
                    </div> -->
                    
                    <div class="div1">
                    <span style="color:red">*</span><span class="demonstration">加班时间:</span>
                    <el-date-picker
                            size="mini"
                            v-model="overtime_all_time_form"
                            type="daterange"
                            style="width:300px"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right"
                            @focus="timeFocus"
                            value-format="yyyy-MM-dd"
                            :disabled="disable_sign">
                    </el-date-picker>
                    <span v-if="isShowMsg5" class="showmsg">{{msg5}}</span>
                    </div>
                  
                    <!-- <div class="div1">
                    <span style="color:red">*</span><span>加班类型:</span>
                    <el-select v-model="application_type_form" clearable style="width: 300px" placeholder="请选择加班类型" size="mini" >
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <span v-if="isShowMsg6" class="showmsg">{{msg6}}</span>
                    </div> -->
            
                    <div class="div1">
                        <span style="color:red">*</span><span>加班地点:</span>
                        <el-input size="mini" style="width: 300px;" v-model="application_place_form_laji" placeholder="请输入加班地点..." @focus="placeFocus" :disabled="disable_sign"></el-input>
                        <span v-if="isShowMsg7" class="showmsg">{{msg7}}</span>
                    </div>
       
                    <div class="div1">
                        <span style="color:red">*</span><span>加班理由:</span>
                        <el-input :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入加班理由" type="textarea" v-model="application_context_form" style="width:300px;" @focus="contextFocus" :disabled="disable_sign"></el-input>
                        <span v-if="isShowMsg8" class="showmsg">{{msg8}}</span>
                    </div>
                    <div class="dialog-footer" style="margin-top:10px">
                        <el-button type="primary" @click="fnSave" style="width:90px;" v-show="insertShow" >新增</el-button>
                        <el-button type="primary" @click="fnEdit" style="width:90px;" v-show="editShow" :disabled="disable_sign">修改</el-button>   
                        <el-button type="danger" @click="sureClose" style="width:90px;">关闭</el-button>
                    </div>
                </el-form>                   
            </el-dialog>
        </div>
        <div>
            <el-table
                ref="multipleTable"
                :data="applicationList"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                border stripe size="mini">
                <el-table-column
                    type="selection"
                    width="30">
                </el-table-column>
                <el-table-column prop="application_id" label="申请表主键id" width="10" v-if="show">

                </el-table-column>
                <el-table-column
                    prop="user_name"
                    label="申请人"
                    width="90"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="create_user"
                    label="创建人"
                    width="90"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="project_id"
                    label="项目编号"
                    width="100"
                    align="center" v-if="show">
                </el-table-column>
                <el-table-column
                    prop="project_name"
                    label="项目名称"
                    width="150"
                    align="center">
                </el-table-column> 
                <el-table-column
                    prop="department_name"
                    label="部门名称"
                    width="100"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="application_time"
                    label="申请时间"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="application_overtime"
                    label="加班时间"
                    align="center">   
                </el-table-column>
                 <el-table-column
                    prop="application_place"
                    label="加班地点"
                    width="150"
                    align="center">
                </el-table-column>
                <!-- <el-table-column
                    prop="audit_level_id"
                    label="审核级数"
                    width="80"
                    align="center"
                    :formatter="fnAuditLevel">
                </el-table-column> -->
                <!-- <el-table-column
                    prop="application_type"
                    label="加班类型"
                    width="90"
                    align="center"
                    :formatter="formatApplicationType">
                </el-table-column> -->
                <el-table-column
                    prop="application_status"
                    label="申请状态"
                    width="80"
                    align="center"
                    :formatter="formatApplicationStatus">
                </el-table-column>
                <!-- <el-table-column
                    prop="application_note"
                    label="审核意见"
                    align="center">
                </el-table-column> -->
                <el-table-column
                    label="操作"
                    width="90"
                    align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="prepareEdit(scope.$index,scope.row)" icon="el-icon-edit" type="info">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="margin-top:10px;height:40px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount" style="float:left">
            </el-pagination>
        </div>
        <div style="width:100px">     
            <el-button size="mini" @click="fnDel" icon="el-icon-delete" type="danger" v-if="applicationList.length>0" :disabled="multipleSelection.length==0">批量删除</el-button>
        </div>
    </div>
</div>
</template>
<script>
    //引入省市两级联动控件
import { provinceAndCityData,CodeToText,TextToCode } from 'element-china-area-data'
import HomeVue from '../Home.vue';
export default {
    
    data(){
        return {
            ischeck:true,
            //控制显示提示信息
            isShowMsg1:'',
            isShowMsg2:'',
            isShowMsg3:'',
            isShowMsg4:'',
            isShowMsg5:'',
            isShowMsg6:'',
            isShowMsg7:'',
            isShowMsg8:'',
           
            //错误提示信息
            msg1:'',
            msg2:'',
            msg3:'',
            msg4:'',
            msg5:'',
            msg6:'',
            msg7:'',
            msg8:'',
          
            //控制新增显示按钮
            insertShow:true,
            //控制编辑显示按钮
            editShow:false,
            //申请表主键
            application_id:'',
            //加班地点
            application_place:'',
            //加班理由
            application_note:'',
            //部门编号
            department_id:'',
            //部门名称
            deparment_name:'',
            //项目编号
            project_id:'',
            //项目名称
            project_name:'',
            //选择的开始和结束时间拼接在一起
            overtime_all_time:[],
            application_start_time:'',
            application_end_time:'',
            //审核级数
            audit_level_id:'',
            //申请状态
            application_status:'',
            //加班类型
            application_type:'',
            //申请表列表
            applicationList:[],
            //部门列表
            departmentList:[],
            //加班理由
            application_context:'',
            //初始不显示新增页面
            dialogVisible:false,
            //动态打开新增或者编辑页面的标题
            dialogTitle:"新增",
            editForm:{
                
            },
            //多选的数据
            multipleSelection:[],
            //用户主键
            user_id:'',
            //用户姓名
            user_name:'',
            //申请状态下拉选择框数据
            options: [{
                    id: '1',
                    name: '已申请'
                    }, {
                    id: '2',
                    name: '审核中'
                    }, {
                    id: '3',
                    name: '已审核'
                    },
                    {
                        id:'4',
                        name:'已打回'
                    }],
            //审核级别下拉选择框数据
            audit_level:[{
                        id:'1',
                        name:'一级审核'
                    },{
                        id:'2',
                        name:'二级审核'
                    },{
                        id:'3',
                        name:'三级审核'
                }],
            //加班类型下拉选择框数据
            typeList:[{
                    id:'0',
                    name:'工作日加班'  
                },
                {
                    id:'1',
                    name:'公休日加班'
                },{
                    id:'2',
                    name:'法定节假日加班'  
                }],
            //用户下拉选择框数据
            userList:[],
            //项目下拉选择框数据
            projectList:[],
            //分页
            //当前页码
            currentPage:1,
            //默认每页的数据量
            pageSize:10,
            //默认数据总量
            totalCount:1000,
            //查询的页码
            start:0,
            /**
             * 新增或者编辑表单
             */
            application_id_form:'',
            //部门名称
            department_id_form:'',
            //项目名称
            project_id_form:'',
            //用户姓名
            user_id_form:'',
            //用户姓名
            user_name_form:'',
            //审核级别
            audit_level_id_form:'',
            //审核级别的下拉选择框的name属性
            audit_level_name_form:'',

            application_start_time_form:'',
            application_end_time_form:'',
            //加班时间
            overtime_all_time_form:[],
            //加班类型
            application_type_form:-1,
            //加班类型的下拉选择框的name属性
            application_type_name_form:'',
            //加班理由
            application_context_form:'',
            //加班备注
            application_note_form:'',
            //加班状态
            application_status_form:'',
            /**
             * 省市两级联动控件
             */
            placeData:provinceAndCityData,
            //加班地点
            application_place_form_laji:'',
            //表单验证规则
            editFormRules:{},
            show:false,
            loading:false,
            formLoading:false,
            defaultValue:'',
            disable_sign:false,
            }
           
        },
    mounted:function(){
        this.loadDepartment();
        this.prepareQuery();
        this.loadProject();
        this.setTimeValue();
    },
    watch: {
      
    },
    methods:{
        //初始化赋值加班时间
        setTimeValue(){
            var date = new Date();  //创建对象  
            var y = date.getFullYear();     //获取年份  
            var m =date.getMonth()+1;   //获取月份  返回0-11  
            var d = date.getDate(); // 获取日  
            if(m<10){
                m = "0"+m;
            }
            if(d<10){
                d = "0"+d;
            }
            var start = y+"-"+m+"-"+d;
            var end = y+"-"+m+"-"+d;
            this.overtime_all_time_form = [start,end];
        },
        //查询按钮点击事件
        prepareQuery(){
            this.fnQuery(this.currentPage,this.pageSize);
        },
        //查询申请单列表方法
        fnQuery(currentPage,pageSize) {
            var _this = this;
            //this.showMask();
            this.loading = true;
            this.postRequest("/application/query",{
                department_id:this.department_id,
                project_id:this.project_id,
                application_place:this.application_place,
                overtime_all_time:this.overtime_all_time,
                audit_level_id:this.audit_level_id,
                application_status:this.application_status,
                user_name:this.user_name,
                currentPage:currentPage,
                pageSize:pageSize
            }).then(resp=> {
                //this.hideMask();
                this.loading = false;
                if (resp && resp.status == 200) {
                    var result = resp.data;
                    //赋值表格数据
                    _this.applicationList = result.pageData;
                    //赋值表格的分页的total属性
                    _this.totalCount = result.total;
                }
            })
        },
        //加载部门列表
        loadDepartment() {
            var _this = this;
            this.getRequest("/application/queryDepartment").then(resp=>{
                if(resp && resp.status == 200){
                    //赋值部门下拉选择框数据
                    _this.departmentList = resp.data;
                }
            })
        },
        //加载项目列表
        loadProject(){
            var _this = this;
            this.getRequest("/application/queryProject").then(resp=>{
                if(resp && resp.status == 200){
                    _this.projectList = resp.data;
                }
            })
        },
        //加载用户数据
        loadUser(){
                var _this = this;
                var sign;
                if(this.department_id_form == null || this.department_id_form == ''){
                    // this.$message({
                    //     type:"warn",
                    //     message:"请先选择部门"
                    // });
                    sign = 0;
                }else{
                    sign = this.department_id_form;
                }
                this.postRequest("/application/queryUser",{
                    depno:sign
                }).then(resp=>{
                    if(resp && resp.status == 200){
                        //赋值用户选择框数据
                        _this.userList = resp.data;
                    }
                })
                 
        },
        //打开新增窗口方法
        openInsert(){
            var _this = this;
            if(this.application_id == null || this.application_id == ''){
                this.dialogTitle = "新增";
                this.dialogVisible = true;
                this.insertShow = true;
                this.editShow = false;
                // this.loadAl()
                this.loadDepartment();
                this.loadUser();
                this.loadProject();
                this.setTimeValue();
            }
        },
        //获取审核等级
        // loadAl(){
        //     var _this=this;
        //     this.getRequest("/application/queryAL").then(resp=>{
        //         if(resp&&resp.status==200){
        //             _this.audit_level = resp.data;
        //         }
        //     })
        // },
        //新增方法
        fnSave() {
            if(!this.department_id_form){
                this.isShowMsg1=true;
                this.msg1='请选择部门'
                this.ischeck=false;
                return ;
            }
            if(!this.application_place_form_laji){
                this.isShowMsg7=true;
                this.msg7='请选择加班地点'
                this.ischeck=false;
                return ;
            }
        
            if(!this.application_context_form){
                this.isShowMsg8=true;
                this.msg8='请填写加班事由'
                this.ischeck=false;
                return ;
            }
            // if(!this.application_type_form){
            //     this.isShowMsg6=true;
            //     this.msg6='请选择加班类型'
            //     this.ischeck=false
            // }
            if(this.overtime_all_time_form.length==0){
                this.isShowMsg5=true;
                this.msg5='请选择加班时间'
                this.ischeck=false;
                return ;
            }
            if(!this.project_id_form){
                this.isShowMsg2=true;
                this.msg2='请选择加班项目'
                this.ischeck=false;
                return ;
            }
            if(!this.user_id_form){
                this.isShowMsg3=true;
                this.msg3='请选择用户'
                this.ischeck=false;
                return ;
            }
            // if(!this.audit_level_id_form){
            //     this.isShowMsg4=true;
            //     this.msg4='请选择审核级别'
            //     this.ischeck=false
            // }
            if(this.application_context_form.length>70){
                this.isShowMsg8=true;
                this.msg8='加班事由过长'
                this.ischeck=false;
                return ;
            }
            if(this.department_id_form != '' && this.application_place_form_laji != '' 
                && this.application_context_form != '' && this.overtime_all_time_form.length != 0
                && this.project_id_form != '' && this.user_id_form != '' 
                && this.application_context_form.length < 70
                ){
                    this.isShowMsg1 = false;
                    this.isShowMsg2 = false;
                    this.isShowMsg3 = false;
                    this.isShowMsg5 = false;
                    this.isShowMsg7 = false;
                    this.isShowMsg8 = false;
                    this.ischeck = true;
                }
           
            if(!this.ischeck){
                return
            }
            var _this = this;
            //this.showMask();
            this.loading = true;
            this.formLoading = true;
            this.postRequest("/application/applicationSave",{
                department_id:this.department_id_form,
                project_id:this.project_id_form,
                user_id:this.user_id_form,
                user_name:this.user_name_form,
                overtime_all_time:this.overtime_all_time_form,
                application_place:this.application_place_form_laji,
                application_context:this.application_context_form,
                application_note:this.application_note_form,
                application_type:this.application_type_form
            }).then(resp=>{
                //this.hideMask();
                this.loading = false;
                this.formLoading = false;
                if(resp && resp.status == 200){
                    this.$message({
                        type: 'info',
                        message: '新增成功'
                    });
                    _this.fnClose()
                }
                //此处如果写到下面，则会并行执行，返回的数据为新增之前的数据，查询不到最新的数据
                this.prepareQuery();
            });  
        },
        //选择用户时改变事件
        fnSelect(id){
            let obj = this.userList.find((item)=>{
                return item.id === id;
            });
            this.user_name_form = obj.name;
        },

        //编辑打开弹窗方法
        prepareEdit(index,row){
            this.dialogVisible = true;
            var _this = this;
            //判定主键id是否为空，定向的显示标题和按钮
            if(row.application_id!=null || row.application_id!= ''){
                this.insertShow = false;
                this.editShow = true;
                this.dialogTitle = "编辑";
            }
            if(row.application_status == 3){
                this.disable_sign = true;
            }
            this.postRequest("/application/queryById",{
                application_id:row.application_id
            }).then(resp=>{
                if(resp && resp.status == 200){
                    var result = resp.data;
                    this.application_id_form = result[0].application_id;
                    this.project_id_form = result[0].project_id;
                    //this.project_name_form = result[0].project_name;
                    this.department_id_form = result[0].department_id;
                    this.deparment_name_form = result[0].deparment_name;
                    this.user_name_form = result[0].user_name;
                    this.user_id_form = result[0].user_id;
                    //赋值给审核级数下拉选择框，设置开始显示的值   此处的id为number类型，而select组件的id为String类型，所以需要转换
                    this.audit_level_id_form = result[0].audit_level_id+"";
                    //赋值给加班类别下拉选择框，设置开始显示的值   此处的id为number类型，而select组件的id为String类型，所以需要转换
                    this.application_context_form = result[0].application_context;
                    this.application_note_form = result[0].application_note;
                    //对省市两级联动插件进行赋值需要在一个数据库中  指定两个区域码  省和市的
                    this.application_place_form_laji = result[0].application_place;
                    this.application_start_time_form = result[0].application_start_time;
                    this.application_end_time_form = result[0].application_end_time;
                    this.application_status_form = result[0].application_status;
                    //赋值加班时间   对Date_time_picker赋值应该赋值为数组[起始时间，结束时间]
                    this.overtime_all_time_form = [this.application_start_time_form,this.application_end_time_form];
                }
                this.loadDepartment();
                this.loadUser();
            })
        },
        //将数据库中的中文名转为区域码用于显示
        chineseToCode(value){
            var array = [];
            var result = [];
            array = value.split(",");
            //将中文转为区域码  放到数组里面  获取省的区域码为TextToCode[]  获取市的区域码为TextToCode[][] 依次类推
            result.push((TextToCode[array[0]]).code);
            result.push((TextToCode[array[0]][array[1]]).code);
            return result;
        },
        //编辑保存方法
        fnEdit(){
            var _this = this;
            //this.showMask();
            this.loading = true;
            this.formLoading = true;
            this.postRequest("application/applicationEdit",{
                application_id:this.application_id_form,
                audit_level_id:this.audit_level_id_form,
                user_id:this.user_id_form,
                project_id:this.project_id_form,
                department_id:this.department_id_form,
                user_name:this.user_name_form,
                application_context:this.application_context_form,
                application_type:this.application_type_form,
                overtime_all_time:this.overtime_all_time_form,
                application_note:this.application_note_form,
                application_place:this.application_place_form_laji,
                application_status:this.application_status_form
            }).then(resp=>{
                //this.hideMask();
                this.loading = false;
                this.formLoading = false;
                if(resp && resp.status == 200){
                    this.$message({
                        type: 'info',
                        message: '修改成功'
                    });
                    this.fnClose();
                }
                //此处如果写到下面，则会并行执行，返回的数据为新增之前的数据，查询不到最新的数据
                this.prepareQuery();
            });
        },
        //点击表格索引触发事件,用于删除时赋值给传入后台的数据
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        //删除按钮触发事件方法
        fnDel(){
            var _this = this;
            var delarr = [];
            const length = this.multipleSelection.length;
            //赋值批量删除或单个删除的id值
            for(let i = 0;i < length;i++){
                    delarr.push(this.multipleSelection[i].application_id);
                }   
            this.$confirm('是否确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.doDel(delarr);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //删除执行方法
        doDel(ids){
            var _this = this;
            //this.showMask();
            this.loading = true;
            this.postRequest("/application/delApplication",{
                ids : ids,
            }).then(resp=>{
                //this.hideMask();
                this.loading = false;
                if(resp && resp.status == 200){
                     this.$message({
                        type: 'info',
                        message: '删除成功'
                    });
                }
                _this.prepareQuery();
            });
        },
        //重置按钮方法
        fnReset(){
            this.department_id = '';
            this.project_id = '';
            this.application_place = '';
            this.overtime_all_time = [];
            this.application_status = '';
            this.prepareQuery();
        },
        //分页
        //每页显示数据量变更
        handleSizeChange: function(val) {
            this.pageSize = val;
            //this.fnQuery(this.criteria, this.currentPage, this.pagesize);
            this.prepareQuery(this.currentPage,this.pageSize);
        },

        //页码变更
        handleCurrentChange: function(val) {
            this.currentPage = val;
            //this.fnQuery(this.criteria, this.currentPage, this.pagesize);
            this.prepareQuery(this.currentPage,this.pageSize);
        }, 
        //格式审核级数
        fnAuditLevel(row,column){
            if(row.audit_level_id == 1){
                return "一级审核";
            }else if(row.audit_level_id == 2){
                return "二级审核";
            }else{
                return "三级审核";
            }
        }, 
        //格式化加班类型
        formatApplicationType(row,column){
            if(row.application_type == 0){
                return "工作日加班";
            }else if(row.application_type == 1){
                return "公休日加班";
            }else{
                return "法定节假日加班";
            }
        },
        //格式化审核状态
        formatApplicationStatus(row,column){
            if(row.application_status == 1){
                return <span style='color:#9BCA63'>已申请</span>;
            }else if(row.application_status == 2){
                return <span style='color:#F0805A'>审核中</span>;
            }else if(row.application_status == 3){
                return <span style='color:#3333FF'>已审核</span>;
            }else{
                return <span style='color:#D7504B'>已打回</span>;
            }
        },
        //关闭确认
        sureClose(){
            this.$confirm('是否确定关闭?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
            }).then(() => {
                this.fnClose();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消关闭'
                });          
            });
        },
        //关闭按钮触发事件
        fnClose(){  
            this.isShowMsg1=false;
            this.isShowMsg2=false;
            this.isShowMsg3=false;
            this.isShowMsg4=false;
            this.isShowMsg5=false;
            this.isShowMsg6=false;
            this.isShowMsg7=false;
            this.isShowMsg8=false;
            this.isShowMsg9=false;
            this.msg1='';
            this.msg2='';
            this.msg3='';
            this.msg4='';
            this.msg5='';
            this.msg6='';
            this.msg7='';
            this.msg8='';
            this.msg9='';
            this.application_id = '';
            this.dialogVisible = false;
            this.application_id_form = '';
            this.department_id_form = '';
            this.project_id_form ='';
            //this.project_name_form ='';
            this.user_id_form = '';
            this.user_name_form = '';
            this.audit_level_id_form = '';
            this.audit_level_name_form = '';
            this.application_start_time_form = '';
            this.application_end_time_form = '';
            this.overtime_all_time_form = '';
            this.application_type_form = '';
            this.application_type_name_form = '';
            this.application_place_form_laji = '';
            this.application_context_form = '';
            this.application_note_form = '';
            this.application_status_form = '';
            this.disable_sign = false;
        },
        //关闭回调方法
        closeDialog(){
            this.fnClose();
        },
        //省市两级联动改变事件
        handleChange(value){  
            //将选择完的地点区域码转换为中文地址   调用CodeToText[]，
            //var array = this.application_place_form_laji;
            //this.application_place_form_laji.push(CodeToText[value[0]+","+CodeToText[value[1]]]);
        },
        //在新增和修改时加班地点出现选择两次就会存入两次的选择的情况
        /**
         * 是因为在选择地址改变的时候，会触发省市两级联动改变事件handleChange函数
         * 此前在其中会进行放置两个选择的地址的名称，在提交时使用此变量，就会出现此前选择几次的数据都在的情况
         * 而现在将此变量删除，相当于省市两级联动改变事件不进行任何操作，而在提交时对动态绑定的数据进行处理，调用此ChangPlaceByCode方法
         * 将区域码转换为省市的名称，保存在一个数组之中，省市之间用逗号分隔，方便进行拆解和处理，返回当前数组，用于提交给后台进行保存
         * 此方法解决当前问题
         */
        changePlaceByCode(value){
            var array = [];
            array.push(CodeToText[value[0]]+","+CodeToText[value[1]]);  
            return array;  
        },
        //部门
        departmentFocus(){
            this.isShowMsg1 = false;
        },
        //项目
        projectFocus(){
            this.isShowMsg2 = false;
        },
        //姓名聚焦
        userFocus(){
            this.isShowMsg3 = false;
        },
        //加班时间聚焦
        timeFocus(){
            this.isShowMsg5 = false;
        },
        //加班地点聚焦
        placeFocus(){
            this.isShowMsg7 = false;
        },
        //理由聚焦
        contextFocus(){
            this.isShowMsg8 = false;
        },
    },
}
</script>
<style>
    .showmsg{
        color:red;
        font-size:12px;
        margin-top: 2px;
        display:block;
        margin-left: 15em;
        text-align: left
    }
    .div1{
        margin-top: 5px;
    }
</style>

